<template>
  <div class="photo-toolbar">
    <div class="toolbar-left">
      <el-button-group>
        <el-button 
          :type="appStore.photoViewMode === 'grid' ? 'primary' : ''"
          @click="setViewMode('grid')"
          title="网格视图"
        >
          <el-icon><Grid /></el-icon>
        </el-button>
        <el-button 
          :type="appStore.photoViewMode === 'list' ? 'primary' : ''"
          @click="setViewMode('list')"
          title="列表视图"
        </el-button>
        <el-button 
          :type="appStore.photoViewMode === 'masonry' ? 'primary' : ''"
          @click="setViewMode('masonry')"
          title="瀑布流视图"
        >
          <el-icon><PictureRounded /></el-icon>
        </el-button>
      </el-button-group>
      
      <el-divider direction="vertical" />
      
      <el-dropdown @command="handleSortCommand">
        <el-button type="text">
          {{ sortOptions[appStore.photoSortBy].label }}
          <el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item 
              v-for="option in sortOptions" 
              :key="option.value"
              :command="option.value"
            >
              {{ option.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      
      <el-button 
        type="text" 
        @click="toggleSortOrder"
        :title="appStore.photoSortOrder === 'asc' ? '升序' : '降序'"
      >
        <el-icon>
          <SortUp v-if="appStore.photoSortOrder === 'asc'" />
          <SortDown v-else />
        </el-icon>
      </el-button>
    </div>
    
    <div class="toolbar-center">
      <el-button-group>
        <el-button 
          :type="appStore.photoGridColumns === 3 ? 'primary' : ''"
          @click="setGridColumns(3)"
          size="small"
        >
          3列
        </el-button>
        <el-button 
          :type="appStore.photoGridColumns === 4 ? 'primary' : ''"
          @click="setGridColumns(4)"
          size="small"
        >
          4列
        </el-button>
        <el-button 
          :type="appStore.photoGridColumns === 5 ? 'primary' : ''"
          @click="setGridColumns(5)"
          size="small"
        >
          5列
        </el-button>
        <el-button 
          :type="appStore.photoGridColumns === 6 ? 'primary' : ''"
          @click="setGridColumns(6)"
          size="small"
        >
          6列
        </el-button>
      </el-button-group>
      
      <el-slider
        v-model="appStore.thumbnailSize"
        :min="100"
        :max="400"
        :step="50"
        style="width: 120px; margin: 0 15px;"
        @change="updateThumbnailSize"
      />
    </div>
    
    <div class="toolbar-right">
      <el-button type="text" @click="toggleSelectMode">
        <el-icon><Select /></el-icon>
        选择
      </el-button>
      
      <el-button type="text" @click="refreshPhotos">
        <el-icon><Refresh /></el-icon>
        刷新
      </el-button>
      
      <el-dropdown @command="handleMoreCommand">
        <el-button type="text">
          更多
          <el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="selectAll">全选</el-dropdown-item>
            <el-dropdown-item command="deselectAll">取消全选</el-dropdown-item>
            <el-dropdown-item command="invertSelection">反选</el-dropdown-item>
            <el-dropdown-item divided command="addToAlbum">添加到相册</el-dropdown-item>
            <el-dropdown-item command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
import { usePhotoStore } from '@/stores/photo';
import { ElButton, ElButtonGroup, ElDivider, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon, ElSlider } from 'element-plus';
import { Grid, PictureRounded, ArrowDown, SortUp, SortDown, Select, Refresh } from '@element-plus/icons-vue';

const appStore = useAppStore();
const photoStore = usePhotoStore();

// 排序选项
const sortOptions = ref([
  { value: 'date', label: '按日期' },
  { value: 'name', label: '按名称' },
  { value: 'size', label: '按大小' },
  { value: 'type', label: '按类型' }
]);

// 设置视图模式
const setViewMode = (mode: 'grid' | 'list' | 'masonry') => {
  appStore.setPhotoViewMode(mode);
};

// 设置网格列数
const setGridColumns = (columns: number) => {
  appStore.setPhotoGridColumns(columns);
};

// 更新缩略图大小
const updateThumbnailSize = (size: number) => {
  appStore.setThumbnailSize(size);
};

// 切换排序顺序
const toggleSortOrder = () => {
  appStore.togglePhotoSortOrder();
};

// 处理排序命令
const handleSortCommand = (command: string) => {
  appStore.setPhotoSortBy(command as any);
};

// 切换选择模式
const toggleSelectMode = () => {
  // TODO: 实现选择模式
  console.log('切换选择模式');
};

// 刷新照片
const refreshPhotos = () => {
  photoStore.fetchPhotos();
};

// 处理更多命令
const handleMoreCommand = (command: string) => {
  switch (command) {
    case 'selectAll':
      // TODO: 实现全选
      console.log('全选');
      break;
    case 'deselectAll':
      // TODO: 实现取消全选
      console.log('取消全选');
      break;
    case 'invertSelection':
      // TODO: 实现反选
      console.log('反选');
      break;
    case 'addToAlbum':
      // TODO: 实现添加到相册
      console.log('添加到相册');
      break;
    case 'delete':
      // TODO: 实现删除
      console.log('删除');
      break;
  }
};
</script>

<style scoped lang="scss">
.photo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  
  .toolbar-left, .toolbar-center, .toolbar-right {
    display: flex;
    align-items: center;
  }
  
  .toolbar-center {
    flex: 1;
    justify-content: center;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .photo-toolbar {
    flex-wrap: wrap;
    padding: 10px;
    
    .toolbar-center {
      order: 3;
      width: 100%;
      margin-top: 10px;
      justify-content: flex-start;
    }
    
    .toolbar-right {
      order: 2;
    }
  }
}
</style>